<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>WebWin组件示例</title>
    <script src="../components/WebWin.js" type="module" ></script>
    <style></style>
  </head>
  <body>
    <win-button onclick="showAlert()">Content</win-button>
    <win-button onclick="showAlert1()">Content1</win-button>
    <win-button disabled>禁用</win-button>
    <win-barbutton value="我无法让高度正确但是我不会修"></win-barbutton>
    <win-barbutton disabled value="反正在90%缩放下也能用">Content</win-barbutton>
    <win-passwordbox></win-passwordbox>
    <win-richrditbox>!!!</win-richrditbox>
    <win-toggleswitch></win-toggleswitch>
    <win-dialog id="myDialog" title="你好!">
      <p>这是一个UWP风格的弹窗示例。</p>
    </win-dialog>
    <script>
      function showAlert() {
        const dialog = document.getElementById("myDialog");

        // 设置内容
        dialog.content = "<p>你好，弹窗！</p>";

        // 设置按钮
        dialog.buttons = [
          { text: "没错", index: 0, closeOnClick: true },
          { text: "还是算了吧", index: 1, closeOnClick: false },
        ];

        // 监听按钮点击事件
        dialog.addEventListener("buttonclick", (e) => {
          //const index = e.detail.index;
          //if (index === 0) {
          //  alert("你点击了第一个按钮");
          //} else if (index === 1) {
          //  alert("你点击了第二个按钮");
          //}
        });

        // 显示弹窗
        dialog.show();
      }
      // 下面是窗口
      function showAlert1() {
        const buttonGroup = document.createElement(
          "win-dropdown"
        );
        buttonGroup.setAttribute("selectable", ""); // 设置为可选模式

        // 添加按钮
        buttonGroup.addButton("小", "small");
        buttonGroup.addButton("中", "medium", true); // 默认选中
        buttonGroup.addButton("大", "large");

        // 添加到DOM
        document.body.appendChild(buttonGroup);

        // 监听按钮点击事件
        buttonGroup.addEventListener("button-click", (e) => {
          console.log("点击的按钮:", e.detail.text);
          console.log("值:", e.detail.value);

          // 根据值执行不同操作
          switch (e.detail.value) {
            case "small":
              // 小尺寸逻辑
              break;
            case "medium":
              // 中尺寸逻辑
              break;
            case "large":
              // 大尺寸逻辑
              break;
          }
        });

        // 获取当前选中的值
        console.log("当前选中:", buttonGroup.selectedValue);
      }
    </script>
    <win-list-plus id="myList">
      <win-list-item style="" icon='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>'>啊啊</win-list-item>
      <win-list-item selecte icon='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>'>awa</win-list-item>
    </win-list-plus>
    <win-checkbox >普通选项</win-checkbox><br>
    <win-tile icon="https://cdn-icons-png.flaticon.com/512/3652/3652191.png">Tile Title</win-tile>
    <br>
    <win-tile icon="https://cdn-icons-png.flaticon.com/512/3652/3652191.png">Tile Title</win-tile>
    <br>
    <win-large-tile icon="https://cdn-icons-png.flaticon.com/512/3652/3652191.png">Tile Title</win-large-tile>
    <br>
    <win-large-tile icon="https://cdn-icons-png.flaticon.com/512/3652/3652191.png">Tile Title</win-large-tile>
  </body>
</html>
